<template>
  <div>
    <!-- 头部导航 -->
    <div class="navbar">
      <img class="tb" src="/img/fh.png" alt="" @click="onClickLeft" />
      <span>上门喂猫</span>
    </div>
    <div class="kkk"></div>
    <!-- 中间图片 -->
    <img src="/img/wm.jpg" class="wm" alt="" />
    <!-- 中間內容 -->
    <div class="center">
      <h3>上门喂猫服务</h3>
      <div>
        <img class="tb" src="/img/fx.png" alt="" />
        <van-cell title="分享" @click="showShare = true" />
        <van-share-sheet
          v-model="showShare"
          title="立即分享给好友"
          :options="options"
          @select="onSelect"
        />
        <!-- <img class="tb" src="/img/fx.png" alt="">
            <span class="s">分享</span> -->
      </div>
      <span class="s1"
        >￥
        <h1>80</h1>
        /次</span
      >
      <div class="center-one">
        <ul>
          <li>
            <img class="img" src="/img/wc.png" alt="" />
            <span>全程视频直播</span>
          </li>
          <li>
            <img class="img" src="/img/wc.png" alt="" />
            <span>一对一线上客服</span>
          </li>
          <li>
            <img class="img" src="/img/wc.png" alt="" />
            <span>6小时内完成派单</span>
          </li>
        </ul>
      </div>
      <div class="center-two" @click="govip">
        <div>
          <span class="span-one">优惠</span>
          <span class="span-two">开通年卡单单享9折</span>
          <span class="span-three">立即开通</span>
        </div>
      </div>
    </div>
    <!-- 底部导航部分 -->
    <van-tabs
      v-model="activeName"
      title-inactive-color="#999"
      title-active-color="#000"
      color="#f8e176"
    >
      <van-tab title="服务介绍" name="a">
        <img class="wm-lag" src="/img/wm-lag.jpg" alt="" />
      </van-tab>
      <!-- <van-tab title="伴宠日记" name="b">
        <div class="b">
          <img src="/img/wm.jpg" class="b-img" alt="" />
          <p>
            这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字
          </p>
          <span class="span1">深圳市 2022-04-06</span>
          <img src="/img/wm.jpg" class="tx" alt="" />
          <span class="span2">我是谁</span>
        </div>
      </van-tab> -->
      <van-tab title="服务评价" name="c">
        <div class="c" v-for="i in evalution.length" :key="i">
          <img :src="evaAvatar[i-1]" class="tx1" alt="" />
          <span class="span3">{{evaNickname[i-1]}}</span>
          <span class="span4">{{evaDate[i-1]}}</span>
          <img src="/img/wjx.png" class="wjx" alt="" v-for="num in evaStar[i-1]" :key="num"/>
          <span class="span5">{{evalution[i-1]}}</span>
        </div>
        
      </van-tab>
    </van-tabs>
    <div class="bottom"></div>
    <!--底部预定部分 -->
    <van-goods-action>
      <van-goods-action-icon icon="chat-o" text="客服" />
      <van-goods-action-button
        @click="go"
        color="#f8e176"
        type="warning"
        text="立即预定"
      />
    </van-goods-action>
  </div>
</template>

<script>
export default {
  data() {
    return {
      activeName: "a",
      showShare: false,
      options: [
        { name: "微信", icon: "wechat" },
        { name: "微博", icon: "weibo" },
        { name: "复制链接", icon: "link" },
        { name: "分享海报", icon: "poster" },
        { name: "二维码", icon: "qrcode" },
      ],
      evaAvatar: [
        "http://112.74.112.119/img/pet/head/head%20(1).jpg",
        "http://112.74.112.119/img/pet/head/head%20(2).jpg",
        "http://112.74.112.119/img/pet/head/head%20(3).jpg",
        "http://112.74.112.119/img/pet/head/head%20(4).jpg",
        "http://112.74.112.119/img/pet/head/head%20(5).jpg",
        "http://112.74.112.119/img/pet/head/head%20(6).jpg",
        "http://112.74.112.119/img/pet/head/head%20(7).jpg",
      ],
      evaNickname: [
        "Kitty",
        "Jessie",
        "A大梦",
        "阿黄",
        "锅盖头53",
        "Mino",
        "阿芸",
      ],
      evaDate: [
        "2022-05-05",
        "2022-05-02",
        "2022-04-30",
        "2022-04-28",
        "2022-04-03",
        "2022-03-28",
        "2022-03-05",
      ],
      evalution: [
        "认真负责，非常赞！",
        "系统默认好评",
        "小姐姐很细心很认真，会积极沟通",
        "超级棒的体验",
        "特别棒~把我家主子搞定了",
        "系统默认好评",
        "认真负责，全程告知，非常有爱心",
      ],
      evaStar:[5,5,4,5,4,5,5]
    };
  },
  methods: {
      govip() {
      this.$router.push("/vip")
      // .catch(err => { console.log(err) });
    },
    onSelect(option) {
      Toast(option.name);
      this.showShare = false;
    },
    //返回首页
    onClickLeft() {
      this.$router.push("/");
    },
    go() {
      this.$router.push("/catshopping");
    },
  },
};
</script>

<style lang="scss" src="../../assets/css/catanddog.scss" scoped></style>
<style lang="scss">
.bottom{
    height:56px;
}
</style>